<template>
    <div class="authority-list-item" :id="'treeLevel_' + model.id +'_'+ index" :class="['list-item_'+ model.level + '_' + index]" v-show="(authorShow || model.checkEnabled) && (model.id != 4002 && model.id != 4003)">
    <!-- <div class="authority-list-item" :id="'treeLevel_' + model.id +'_'+ index" :class="['list-item_'+ model.level + '_' + index]" v-show="authorShow || model.checkEnabled"> -->
        <!-- <div class="ahthority-label" :class="['tree_' + model.level]">
            <el-checkbox v-model="model.checked" :disabled="model.disabled" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
        </div>
        <div class="child" :class="{'has-child': model.children.length,'default-style': model.children.length==0}">
            <tree-author v-for="(item,index) in model.children" 
                :key="index"
                :model="item"
                :index="index"
                >
            </tree-author>
        </div> -->
        
        <!-- <div class="ahthority-label" :class="['tree_' + model.level]" :id="'treeLevel_' + model.id">
            <el-checkbox v-model="model.checked" :disabled="model.disabled" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
        </div> -->
        <div class="ahthority-label" :class="['tree_' + model.level]" :id="'treeLevel_' + model.id">
            <template v-if="(model.menuName == 'e学云平台监控' || model.menuName == '运维服务器监控系统')&& !model.disabled">
               <el-checkbox :disabled="true" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
            </template>
            <template v-else>
                <el-checkbox v-model="model.checked" :disabled="model.disabled" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
            </template>
        </div>
        
        <div class="child" :id="'tree_'+model.id" v-show="isShowMenu(model.id)" :class="{'has-child': model.children.length,'default-style': model.children.length==0}">
            <tree-author v-for="(item,index) in model.children" 
                :key="index"
                :model="item"
                :index="index"
                >
            </tree-author>
        </div>
    </div>
</template>
<script>
export default {
    name: 'treeAuthor',
    props: {
        model: {
            type: Object,
            default() {
                return {}
            }
        },
        // 传递过来的值
        index: {
            type: Number,
            default: 0
        } 
    },
    computed: {
        authorShow() {
            return this.$route.name == '查看权限' ? true : false;
        }
    },
    data() {
        return {
            checked: false,
            flag: false,
            flag1: false,
            childChecked: false, // 子集选中的状态
            intNoticeList: ['9002', '9003'],
            hideMenuData: [],
            noticeChecked: true
        }
    },
    methods: {
        noticeNav(model) {
            // console.log(id);
            // console.log(this.intNoticeList.indexOf(id) > -1);
            return this.intNoticeList.indexOf(model.id) > -1 && (model.checked = true);
        },
        isShowMenu(id) {
            return !(this.hideMenuData.indexOf(id) > -1);
        },
        change(model, e) {
            this.getAllParent(model);
            this.isParentCheck(this.$parent);     
            this.getAllChildren(model);   
            this.childChecked = false;
        },
        // 获取所有父级选中状态
        getAllParent(parent) {
            this.isParentCheck(parent);
        },
        // 判断是否父级选中状态
        isParentCheck(parent) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                var flag = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        flag = true;
                    }
                }
                parent.model.checked = flag;
            }
            if (parent.model) {
                parent.model.checked = flag;
            }
            // this.getChildCheck(parent);
            if (parent.$parent) {
                this.isParentCheck(parent.$parent);
            }
        },
        // 获取所有子集的状态
        getChildCheck(model) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                this.flag = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        this.flag = true;
                    }
                }
                parent.model.checked = this.flag;
            }
            if (parent.model) {
                parent.model.checked = this.flag;
            }

        },
        // 获取子集的状态
        getChild(model) {
            if (model.children) {   
                model.children.forEach(item => {
                    if (!item.checked&&item.checkEnabled) {
                        this.childChecked = true;
                    }
                    if (item.children.length > 0) {
                        this.getChild(item);
                    }
                });
            }
            if (this.childChecked == true) {
                model.checked = this.childChecked;
            }    
            this.deleteChecked(model, this.childChecked)
        },
        // 获取所有子集
        getAllChildren(model) {
            this.getChild(model)
        },
        // 删除子级状态
        deleteChecked(model) {
            if (model.children) {
                model.children.forEach(item => {
                    item.checked = item.checkEnabled && model.checked;
                    if (item.children) {
                        this.deleteChecked(item);
                    }
                });
            }
            this.getChildCheck(this.$parent);
        }
    }
}
</script>
<style lang="scss">
    $border-color: #ebebeb;
    .authority-list-wrapper {
        // width: 600px;
        width: 1200px;
        margin-left: 24px;
        margin-bottom: 20px;
        overflow: hidden;
        .authority-list-item {
        display: flex;
        margin-bottom: 19px;
        border: 1px solid $border-color;
            .child{  
                width: auto;
                >.authority-list-item {
                    border: none;
                    margin-bottom: 0;
                    >.tree_2::first-of-type {
                        border-top: none;
                    }
                }
            }
            .child.has-child {
                border-left: 1px solid $border-color;
            }
            .ahthority-label {
                width: 300px;
                height: 40px;
                padding: 12px 18px;
                border-top: 1px solid  $border-color;
            }
            .ahthority-label.tree_1 {
                border-top: none;

            }
            .border-none {
                border: none;
            }
            .default-style {
                // width: 220px;
                height:40px;
                border-top: 1px solid $border-color;
                // border-left: 1px solid $border-color;

            }
            .tree_1 ~ .default-style {
                border: none;
            }
            .tree_3 ~ .default-style{
                // ------------cm
                width: 300px;
                height: 40px;
                border-top: 1px solid $border-color;
            }

            .list-item_2_0 .tree_2, .list-item_2_0 .tree_3, .list-item_2_0 .default-style{
                border-top: none;
            }  
        }
        .list-item_1_5 {
            // .list-item_3_1 {
            //     .tree_3 {
            //         border-top: 1px solid $border-color;
            //     }
            //     border-bottom: 1px solid $border-color;
            // }
            .child {
                .list-item_2_0 {
                    .child {
                        .list-item_3_1 {
                            .tree_3 {
                                border-top: 1px solid $border-color;
                            }
                            border-bottom: 1px solid $border-color;
                        }
                        .list-item_3_3 {
                            border-top: 1px solid $border-color;
                        }
                    }
                }
            }
        }
        .ahthority-label.has-child {
            border-bottom: none;
        }
        #treeLevel_9002_0, 
        #treeLevel_9003_1,#treeLevel_9052_2 {
            display: none;
        }
        #treeLevel_9037, #treeLevel_9038,#treeLevel_9039, #treeLevel_9040{ 
            border-right: 1px solid $border-color;
        }
        #treeLevel_9036_2,#treeLevel_9042_0, #treeLevel_9051_0 {
            border-bottom: 1px solid $border-color;
        } 
        #treeLevel_9043, #treeLevel_9046 {
            border-right: 1px solid $border-color;
        }
  }
</style>

